<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
				xmlns:ui="http://java.sun.com/jsf/facelets"
				xmlns:h="http://java.sun.com/jsf/html"
				xmlns:f="http://java.sun.com/jsf/core"
				xmlns:s="http://jboss.com/products/seam/taglib"
				xmlns:rich="http://richfaces.org/rich"
				xmlns:a4j="http://richfaces.org/a4j"
				template="../template.xhtml">

	<!-- content -->
	<ui:define name="content">
		<h:messages globalOnly="true" styleClass="message" id="globalMessages" />
		<h:form>
		
		<s:button action="#{produtoBean.prepareCreate}" id="novo1" value="Novo produto" />
		<br/><br/>
		
		<rich:panel>
			<f:facet name="header">Produtos</f:facet>
			<div class="results" id="produtoResults">
			<rich:dataTable 
				id="produtoList" var="produto" 
				value="#{produtoList}" rows="20">
				<f:facet name="header">
					<rich:datascroller 
						id="produtoListScroller" for="produtoList" 
						maxPages="12" style="align: right"
						renderIfSinglePage="false"
						bypassUpdates="true" pageIndexVar="pageIndex" pagesVar="pages">
					</rich:datascroller>
				</f:facet>
				
				<rich:column sortBy="#{produto.id}">
					<f:facet name="header">ID</f:facet>
            		#{produto.id}
				</rich:column>
				<rich:column width="300px" sortBy="#{produto.descricao}">
					<f:facet name="header">Descrição</f:facet>
            		#{produto.descricao}
	        	</rich:column>
				<rich:column>
					<f:facet name="header">Ação</f:facet>
					<a4j:commandLink id="detalheproduto" action="#{produtoBean.detalhar(produto)}" reRender="produtoList">
						<h:graphicImage alt="Detalhar" title="Detalhar" url="../img/bullet_mais.png" style="border:0; margin:1px;" rendered="#{produto.detalhar == false}" />
						<h:graphicImage alt="Esconder" title="Esconder" url="../img/bullet_menos.png" style="border:0; margin:1px;" rendered="#{produto.detalhar == true}" />
					</a4j:commandLink>
					<s:link id="editar" action="update"><h:graphicImage alt="Editar" title="Editar" url="../img/edit.png" style="border:0; margin:1px;" /></s:link>&nbsp;&nbsp;
					<s:link id="remover" action="delete"><h:graphicImage alt="Remover" title="Remover" url="../img/delete.png" style="border:0; margin:1px;" /></s:link>
				</rich:column>
				<rich:column breakBefore="#{produto.detalhar}" colspan="3" rendered="#{produto.detalhar == true and produto.compras.size > 0}">
					<rich:dataList id="comprasProduto#{produto.id}" var="compra" value="#{produto.compras}" style="padding-left:13px;">
						<h:outputText value="#{compra.data}">
							<s:convertDateTime pattern="dd/MM/yyyy" />
						</h:outputText>
						<h:outputText value=" - #{compra.supermercado.descricao} - " />
						<h:outputText value="#{compra.preco}">
							<f:convertNumber type="currency" currencySymbol="R$" maxFractionDigits="2" />
						</h:outputText>
					</rich:dataList>
				</rich:column>
				
				<f:facet name="footer">Total: #{produtoList.size}</f:facet>
			</rich:dataTable>
			</div>
		</rich:panel>
		<br />
		<s:button action="#{produtoBean.prepareCreate}" id="novo2" value="Novo produto" />
		</h:form>
	</ui:define>
</ui:composition>
